<template>
  <div class="myline-page">
    <div ref="linePage"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'LinePage',
  data(){
    return{
      SeriesArry:[]
    }
  },
  props:{
    Name:{
      type: Array,
      default: []
    },
    LinePageDate:{
      type: Object,
      default:{}
    },
    titleText:{
      type: String,
      default: ''
    },
    titleColor:{
      type: String,
      default: ''
    },
    titleSize:{
      type: Number,
      default: 20
    },
    textUnit:{
      type: Array,
      default: []
    },
  },
  watch:{
    Name:{
      immediate:true,
      deep:true,
      handler(newValue,oldValue){
        // console.log(newValue)
      }
    },
    LinePageDate:{
      immediate:true,
      deep:true,
      handler(newValue,oldValue){
        // console.log(newValue)
        let groupArry = []
        let i = 0
        for (let v in newValue){
          if(v !== 'lpweek'){
            let obj = {
              name: '',
              type: 'line',
              symbolSize: 10,
              data: '',
              itemStyle: {
                borderWidth: 2
              }
            }
            obj.name = this.Name[i]
            obj.data = newValue[v]
            groupArry.push(obj)
            i++
          }

        }
        this.SeriesArry = groupArry
        this.$nextTick(()=>{
          this.LinePage(this.$refs.linePage)
        })

      }
    },
  },
  methods:{

    LinePage(ref) {
      let that = this
      let myChart = echarts.init(ref)
      let Opt
      Opt = {
        title: {
          text: this.titleText,
          textStyle: {
            color: this.titleColor,
            fontSize: this.titleSize,
            fontWeight: 'normal',
            fontFamily: 'Microsoft YaHei',
            overflow: 'truncate',
            width: 200
          },
          padding: [2, 0, 0, 0]
        },
        tooltip: {
          show: true,
          trigger: 'axis',
          renderMode: 'html',
          backgroundColor: '#00000044',
          borderWidth: 0,
          extraCssText: 'box-shadow: 0 0 6px 2px #098e8d;',
          formatter(params, ticket, callback) {
            let htmlStr = ''
            for (let i = 0; i < params.length; i++) {
              let unit = ''
              if(that.textUnit.length === 1){
                unit = that.textUnit[0]
              }else if(that.textUnit.length > 1){
                unit = that.textUnit[i]
              }
              let param = params[i]
              let seriesName = param.seriesName//图例名称
              let value = param.value//y轴值
              let color = param.color//图例颜色
              htmlStr += `
                      <div style="font-size: 12px;color:#e9f7f7;">
                        ${seriesName}
                        <div style="display: flex;align-items: center">
                          <span style="font-size: 14px!important;color:${color}!important;margin-right: 5px">
                           ${value}
                          </span>
                          ${unit}
                        </div>
                      </div>
                `
            }
            return htmlStr
          }
        },
        legend: {
          type: 'plain',
          icon: 'circle',
          top: 0,
          right: 0,
          width: 345,
          align: 'left',
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            color: '#e9eef3',
            padding: [4, 0, 0, 10],
            rich: {
              a: {
                fontSize: 12
              }
            }
          },
          formatter(pars) {
            return `{a|${pars}}`
          },
          data: this.Name
        },
        grid: {
          left: 11,
          right: '0%',
          bottom: '0%',
          top: 47,
          containLabel: true
        },
        xAxis: {
          show: true,
          type: 'category',
          axisTick: {
            'show': false   //去掉x轴刻度线
          },
          axisLabel: {
            color: '#6f6f7c',
            margin: 12,
            fontSize: 14
          },
          axisPointer:{
              show: true,
              type: 'shadow',
              label: {
                show: false
              },
              shadowStyle: {
                color: echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 1, color: '#0439ca00' },
                  { offset: 0.6, color: '#10c2d7' },
                  { offset: 0.3, color: '#1079eb' },
                  { offset: 0, color: '#1065f1' }
                ]),
                opacity: 0.2
              }
            },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#e5edf733',
              width: 1,
              type: 'dotted'
            }
          },
          data: that.LinePageDate.lpweek,
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: {
              width: 1,
              type: 'dotted',
              color: '#e5edf733'
            }
          },
          axisLabel: {
            show: false
          }
        },
        series: this.SeriesArry
      }
      myChart.setOption(Opt,true)
    },
  }
}
</script>

<style scoped lang="scss">
.two {
    width: 100%;
    height: 219px;

    div {
      width: 100%;
      height: 100%;
    }
  }
.myline-page {
  width: 100%;
  height: 100%;
  div{
    width: 100%;
    height: 100%;
  }
}
</style>
